<template>
	<view class="" style="height:100vh;">
		<view class="tn-margin">
			距离考试结束还有：
			<tn-count-down ref="countDown" backgroundColor="red" fontColor="#FFFFFF" :fontSize="33" :separatorSize="25"
				:timestamp="paperObj.leftSeconds" separator="cn" @end='endExam'></tn-count-down>
		</view>

		<view class="tn-margin tn-flex tn-flex-row-between">
			<view @click="showCard"
				class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-bg-cyan">
				答题卡</view>
			<view @click="submitPaper"
				class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-bg-cyan  tn-shadow-blur">
				交卷</view>
		</view>
		<view>
			<!-- 单选题 -->
			<view id="card">
				<view class="tn-margin-sm">
					<tn-list-view :card="true" :title="currentItem.sort+1+'. '+currentItem.content"
						backgroundColor="#EFEFEF">
						<image style="width: 100%;" v-if="currentItem.image" src="currentItem.image"></image>
						<block v-if="currentItem.quType===1||currentItem.quType===3">
							<tn-radio-group width="100%" v-model="answer" wrap style="width: 100%;">
								<tn-list-cell v-for="(item,index) in currentItem.answerList" :key='index'>
									<tn-radio :name="item.id">
										<view class="tn-padding-sm">
											{{item.abc}}. {{item.content}}
										</view>
									</tn-radio>
									<view class="tn-margin" v-if="item.image">
										<image style="width: 100%;" v-if="item.image" src="currentItem.image"></image>
									</view>
								</tn-list-cell>
							</tn-radio-group>
						</block>
						<block v-if="currentItem.quType===2">
								<tn-list-cell v-for="(item,index) in currentItem.answerList" :key='item.id'>
									<tn-checkbox v-model="item.checked" :name="item.id" @change="(e)=>checkChange(e,index)">
										{{item.abc}}. {{item.content}}
									</tn-checkbox>
									<view class="tn-margin" v-if="item.image">
										<image style="width: 100%;" v-if="item.image" src="currentItem.image"></image>
									</view>
								</tn-list-cell>
						</block>

					</tn-list-view>
				</view>
			</view>

		</view>

		<view class="tn-margin tn-flex tn-flex-row-between">
			<view @click="preItem"
				class="justify-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-bg-cyan">
				上一题<text class="tn-icon-left-arrow"></text></view>
			<view @click="nextItem"
				class="justify-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-bg-cyan  tn-shadow-blur">
				<text class="tn-icon-right-arrow"></text>下一题
			</view>
		</view>

		<tn-modal v-model="confirmFlag" :content="tipStr" :button="button" :maskCloseable="false" @click="qurenjiajuan" />

    <!--  答题卡  -->
		<block v-if="show">
			<tn-popup mode="bottom" id="popup_content" v-model="show" mask closeBtn>
				<view class="content" >
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view>
							<tn-list-view title="答题卡" :card="true" backgroundColor='#F8F8F8' />
							<view style="margin: 10px;">
								<tn-tag style="border-radius: 5px;" backgroundColor="#AAAAAA"
									fontColor="#080808">未作答</tn-tag>
								<tn-tag style="border-radius: 5px;margin-left: 20px;" class="tn-margin-left-lg"
									backgroundColor="#24F083" fontColor="tn-color-white">已作答</tn-tag>
							</view>

							<tn-list-view title="单选题" :card="true" backgroundColor='#F8F8F8' />
							<view class="tn-flex tn-flex-wrap tn-flex-row-left">
								<block v-for="(item,index) in paperObj.radioList">
									<view @click="getItem(item.quId,item.sort)" style="margin: 5px;width: 36px;" class="justify-content-item tn-padding-sm tn-no-padding-left tn-no-padding-right
										 tn-text-center tn-radius
										 bg-flex-shadow tn-shadow-blur" :class="setColor(item.quId,item.answered)">
										{{item.sort+1}}
									</view>
								</block>
							</view>
							<tn-list-view title="多选题" :card="true" backgroundColor='#F8F8F8' />
							<view class="tn-flex tn-flex-wrap tn-flex-row-left">
								<block v-for="(item,index) in paperObj.multiList">
									<view @click="getItem(item.quId,item.sort)" style="margin: 5px;width: 36px;" class="justify-content-item tn-padding-sm tn-no-padding-left tn-no-padding-right
										 tn-text-center tn-radius
										 bg-flex-shadow tn-shadow-blur" :class="setColor(item.quId,item.answered)">
										{{item.sort+1}}
									</view>
								</block>
							</view>
							<tn-list-view title="判断题" :card="true" backgroundColor='#F8F8F8' />
							<view class="tn-flex tn-flex-wrap tn-flex-row-left">
								<block v-for="(item,index) in paperObj.judgeList">
									<view @click="getItem(item.quId,item.sort)" style="margin: 5px;width: 36px;" class="justify-content-item tn-padding-sm tn-no-padding-left tn-no-padding-right
										 tn-text-center tn-radius
										 bg-flex-shadow tn-shadow-blur" :class="setColor(item.quId,item.answered)">
										{{item.sort+1}}
									</view>
								</block>
							</view>
							<view style="height: 10vh;"></view>
						</view>
					</scroll-view>
				</view>
			</tn-popup>
		</block>


	</view>
</template>

<script>
import gsap from 'gsap';
	import {
		fillAnswer,
		paperDetail,
		quDetail,
		handExam
	} from '@/api/exam.js'
	export default {
		data() {
			return {
				time: null,
				show: false,
				confirmFlag: false,
				paperId: null,
				quId: null,
				currentIndex: 0,
				paperObj: {},
				currentItem: {},
				allItems: [],
				answer: '',
				tipStr: '',
				button: [{
						text: '取消',
						backgroundColor: '#d4d4cd',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],
			}
		},
		onLoad(options) {
			let id = options.id
			let title = options.title
			uni.setNavigationBarTitle({
			title
			});
			this.allItems = []
			this.paperId = id
			paperDetail({
				id: id
			}).then(res => {
				this.paperObj = res.data
				if (res.data.radioList.length > 0) {
					this.quId = res.data.radioList[0].quId
				} else if (res.data.multiList.length > 0) {
					this.quId = res.data.multiList[0].quId
				} else if (res.data.judgeList.length > 0) {
					this.quId = res.data.judgeList[0].quId
				}
				this.allItems = [].concat(res.data.radioList).concat(res.data.multiList).concat(res.data.judgeList)
				quDetail({
					paperId: id,
					quId: this.quId
				}).then(res => {
					this.currentItem = res.data
          res.data.answerList.forEach(item=>{
            if(item.checked){
              this.answer = item.id
            }
          })
				})
			})
		},
		methods: {
      // 多选变动
      checkChange(val,index){
        this.currentItem.answerList[index].checked = val.value

        this.answer = this.currentItem.answerList.filter(item=>{
          return item.checked
        }).map(item=>{
          return item.id
        })
      },
			endExam(){
				handExam({
					id: this.paperId
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '考试结束'
					})
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/index/index'
						})
					},1000)
				})
			},
			/**
			 * 交卷
			 */
			async submitPaper() {
        uni.showLoading()
        if(this.answer.length)await this.fillAnswerFun()
        paperDetail({
          id: this.paperId
        }).then(res => {
          this.allItems = [].concat(res.data.radioList).concat(res.data.multiList).concat(res.data
            .judgeList)
          let count = 0
          let list = this.allItems
          for (var i = 0; i < list.length; i++) {
            let t = list[i]
            if (t.answered === false) {
              count = count + 1
            }
          }
          this.confirmFlag = true
          if (count > 0) {
            this.tipStr = '您还有' + count + '道题目未答，确认要交卷吗？'
          } else {
            this.tipStr = '确认要交卷吗？'
          }
          this.$nextTick(()=>{
            uni.hideLoading()
          })
        })

			},
			qurenjiajuan(e) {
				this.confirmFlag = false
				if (e.index * 1 === 1) {
					handExam({
						id: this.paperId
					}).then(res => {

						uni.redirectTo({
							url:'/pages/exam/result/result?id='+this.paperId,
						})
					})
				}
			},
			/**
			 * 上一题
			 */
			async preItem() {
				if (this.currentIndex - 1 < 0) {
          return uni.showToast({
						icon: 'none',
						title: '当前是第一题'
					})
				} else {
          if(this.answer.length)await this.fillAnswerFun()
          let quId = this.allItems[this.currentIndex - 1].quId
					this.quId = quId
					this.loadItem()
				}

        gsap.fromTo("#card", {
          x:'-100%',
          opacity:0,
          // 特殊属性，动画本身相关的设定
          duration: 2, // 动画时长
        },{
          x:'0%',
          opacity:1,
          ease:"circ.out",
        });
			},
			/**
			 * 下一题
			 */
			async nextItem() {
				if (this.currentIndex + 1 == this.allItems.length) {
          return uni.showToast({
						icon: 'none',
						title: '当前是最后一题'
					})
				} else {
          if(this.answer.length)await this.fillAnswerFun()
					let quId = this.allItems[this.currentIndex + 1].quId
					this.quId = quId
					this.loadItem()

          gsap.fromTo("#card", {
            x:'100%',
            opacity:0,
            // 特殊属性，动画本身相关的设定
            duration: 2, // 动画时长
          },{
            x:'0%',
            opacity:1,
            ease:"circ.out",
          });

				}
			},
			showCard() {
				//显示答题卡
				paperDetail({
					id: this.paperId
				}).then(res => {
					this.show = true
					this.paperObj = res.data
					this.allItems = [].concat(res.data.radioList).concat(res.data.multiList).concat(res.data
						.judgeList)
				})
			},
			/**
			 * 提交题目答案
			 */
			fillAnswerFun() {
				let params = {
					paperId: this.paperId,
					quId: this.quId
				}
				if (this.currentItem.quType === 2) {
					params['answers'] = this.answer
				} else {
					params['answers'] = [this.answer]
				}
				return fillAnswer(params)
			},
      // 获取某一道题
			async getItem(quId, sort) {
        if(this.answer.length)await this.fillAnswerFun()
				this.currentIndex = sort
				this.quId = quId
				this.loadItem()
        const tl = gsap.timeline()
        tl.to("#popup_content", {
          y: "100%",
          // 特殊属性，动画本身相关的设定
          duration: 1, // 动画时长
          ease: "power4.out",
          onComplete: ()=>{
            this.show = false
          }
        });
        tl.from("#card", {
          scale:0,
          opacity:0,
          // 特殊属性，动画本身相关的设定
          duration: .5, // 动画时长
          ease: "power1.in",
        },"<");
			},
			loadItem() {
				quDetail({
					paperId: this.paperId,
					quId: this.quId
				}).then(res => {
					this.currentItem = res.data
					this.currentIndex = res.data.sort
					let list = res.data.answerList;
					let quType = res.data.quType
					if (quType === 2) {
						this.answer = []
					} else {
						this.answer = ''
					}
					for (var i = 0; i < list.length; i++) {
						let t = list[i]
						if (t.checked === true) {
							if (quType === 2) {
								this.answer.push(t.id)
							} else {
								this.answer = t.id
							}
						}
					}

				})
			},
			setColor(id, flag) {
				if (id === this.quId) {
					return 'tn-bg-orange'
				}
				if (flag) {
					return 'tn-bg-green'
				} else {
					return 'tn-bg-gray'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
